{% extends 'xBlog_admin/admin_base.html' %}
{% load xBlog_filter %}
{% block content %}
    <script src="/static/xBlog_admin/js/clipboard.min.js"></script>

    {% include 'xBlog_admin/upload_dialog.html' %}

    <div class="panel-body">
        <fieldset style="border: 1px solid #ccc; padding-top: 25px; border-radius: 5px; background: #f5f5f5;">
            <div class="form-row form-group field-title col-sm-4">
                <div class="widget_type__admintextinputwidget">
                    <label class="required" for="id_title">Title:</label>
                    <input class="required vTextField form-control" id="id_title" maxlength="100" name="title"
                           type="text" value="{{ article.title }}">
                </div>
            </div>
            <div class="form-row form-group field-catagory col-sm-4">
                <div class="widget_type__select">
                    <label class="required" for="id_catagory">Catagory:</label>
                    <div class="related-widget-wrapper input-group">
                        <select class="required form-control" id="id_catagory" name="catagory">
                            {% for catagory in catagories %}
                                <option value="{{ catagory.id }}"
                                        {% if catagory == article.catagory %}selected="selected"{% endif %}>{{ catagory.catagory_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-row form-group field-archive col-sm-4">
                <div class="widget_type__select">
                    <label class="required" for="id_archive">Archive:</label>
                    <div class="related-widget-wrapper input-group">
                        <select class="required form-control" id="id_archive" name="archive">
                            {% for archive in archives %}
                                <option value="{{ archive.id }}"
                                        {% if archive == article.archive %}selected="selected"{% endif %}>{{ archive.archive_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-row form-group field-tags">
                <div class="widget_type__filteredselectmultiple">
                    <label class="required" for="id_tags" style="margin-left: 17px;">Tags:</label>

                    <div class="related-widget-wrapper input-group col-sm-12">
                        <!-- <script type="text/javascript">addEvent(window, "load", function(e) {SelectFilter.init("id_tags", "tags", 0); });</script> -->
                        <div class="selector" style="padding-left: 20px;">
                            {% if article %}
                                {% for tag in article.tags.all %}
                                    <label class="article-tags animated zoomIn" title="{{ tag.tag_name }}"
                                           ondblclick="remove_tag(this)">
                                        <span class="tag glyphicon glyphicon-tag">{{ tag.tag_name }}</span>
                                    </label>
                                {% endfor %}
                            {% endif %}
                            <div class="dropdown" id="tags-available_div" style="display: inline-block;">
                                <span class="glyphicon glyphicon-plus-sign dropdown-toggle"
                                      title="Click to add tags and doubleclick to remove" id='add_tag'
                                      data-toggle="dropdown"
                                      style="color: #337ab7;border: none; margin-top: 16px; cursor: pointer;"></span>
                                <ul class="dropdown-menu" id="tags-available"
                                    style="margin-left: -17px;margin-top: 4px;">
                                    <li class="dropdown-menu-header text-center">
                                        <strong>Tags Available</strong>
                                    </li>
                                    <li role="presentation" id="tagAvailableList">
                                        {% for tag in tags %}
                                            {% if article and tag not in article.tags.all %}
                                                <label class="available-tags" title="{{ tag.tag_name }}"
                                                       onclick="add_tag(this)">
                                                    <span class="tag glyphicon glyphicon-tag">{{ tag.tag_name }}</span>
                                                </label>
                                            {% elif not article %}
                                                <label class="available-tags" title="{{ tag.tag_name }}"
                                                       onclick="add_tag(this)">
                                                    <span class="tag glyphicon glyphicon-tag">{{ tag.tag_name }}</span>
                                                </label>
                                            {% endif %}
                                        {% endfor %}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-row form-group field-content col-sm-11">
                    <div class="widget_type__admintextareawidget">
                        <label class="required" for="id_content">
                            Content:
                        </label>
                        <div id="epiceditor" style="height: 390px;">
                        </div>
                    </div>
                </div>

                <div class="submit-row list-group col-sm-1" style="margin-top: 100px;">
                    <button title="Save" class="list-group-item" id='upload-file-button'
                            onclick="$('#mymodal').modal('toggle');">
                        <span class="glyphicon glyphicon-cloud-upload" title="Upload Files" id='upload-file'></span>
                    </button>
                    <button type="submit" title="Save" class="list-group-item active" name="_save"
                            onclick="saveArticle({% if article %}{{ article.id }}{% else %}{{ article_id }}{% endif %})">
                        <span class="glyphicon glyphicon-floppy-disk"></span>
                        <!-- <span class="glyphicon glyphicon-tag"></span> -->
                    </button>
                    <button type="submit" class="list-group-item" title="Save and add another" name="_addanother"
                            onclick="saveArticleAddNew({% if article %}{{ article.id }}{% else %}{{ article_id }}{% endif %})">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                    <button type="submit" class="list-group-item" title="Save and continue editing" name="_continue"
                            onclick="saveArticleContinueEdit({% if article %}{{ article.id }}{% else %}{{ article_id }}{% endif %})">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </button>
                    {% if article %}
                        <a title="Delete" class="list-group-item deletelink"
                           href="{% url 'blog_articles_delete' article_id=article.id %}"
                           style="margin-right: 19px;">
                            <span class="glyphicon glyphicon-trash"></span>
                        </a>
                    {% endif %}

                </div>
            </div>
        </fieldset>
    </div>

    <script>
        $(function () {
            editor = new EpicEditor(opts).load();
            new Clipboard('.copy-button');
            {% if article %}
                editor.importFile(null, '{{ article.content|escape_content }}');
            {% else %}
                initAddPage();
            {% endif %}
        });
    </script>
{% endblock %}